<template>
  <div class="reply-comments-item">
    <el-row>
      <el-col :span="3" class="user-wrap">
        <div class="img-wrap">
          <img :src="`${$baseImgUrl}home/${info.avator}`">
        </div>
        <p class="username">{{info.username}}</p>
      </el-col>
      <el-col :span="21" class="content-wrap">
        <div class="content">
          {{info.comment}}
        </div>
        <div class="description">
          <div class="toolbar">
            {{info.date}}
            <span class="reply-btn" @click="replyLevelOwner">
              {{replyBtnText}}
              <span
                v-if="info.replyList.length && !showReplyList"
              >
                ({{info.replyList.length}})
              </span>
            </span>
          </div>
        </div>
        <div class="reply-container" v-show="showReplyList">
          <!-- 回复列表 -->
          <ul class="reply-list-wrap">
            <li
              v-for="(item, index) in info.replyList"
              :key="index"
            >
              <div class="reply-img-wrap">
                <img :src="`${$baseImgUrl}home/${item.avator}`" />
              </div>
              <div class="reply-content">
                <span class="reply-username">{{item.username}}：</span>
                <span
                  v-if="item.owner !== info.username"
                >
                  回复
                  <span class="reply-username">{{item.owner}}</span>
                </span>
                {{item.comment}}
              </div>
              <div class="description">
                {{item.date}}
                <span class="reply-btn" @click="replyLevelReplyer(item)">回复</span>
              </div>
            </li>
          </ul>
          <div class="reply-self" v-if="info.showReply">
            <el-input
              ref="replyCommentInput"
              type="textarea"
              :rows="2"
              placeholder="发表友善的回复"
              resize="none"
              v-model="replyComment"
            ></el-input>
            <div class="reply-footer">
              <el-button type="primary" size="mini" @click="reply">发表</el-button>
              <el-button type="default" size="mini" @click="closeReply">关闭</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ReplyCommentsItem',
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      replyComment: '',
      showReplyList: true,
      replyingUser: null, // 当前正在回复的对象
      commentPrependLen: 0, // 评论前置的字符个数，发表时需要从此位置截取后面的内容
    };
  },
  computed: {
    replyBtnText() {
      if (this.info.replyList.length) {
        return this.showReplyList ? '收起回复' : '回复';
      }
      return this.info.showReply ? '收起回复' : '回复';
    }
  },
  mounted() {
    this.replyCommentInput = this.$refs.replyCommentInput;
  },
  methods: {
    // 回复层主
    replyLevelOwner() {
      // 如果有回复，则此按钮只是简单的隐藏和显示功能
      if (this.info.replyList.length) {
        this.showReplyList = !this.showReplyList;
      } else if (this.info.showReply) {
        this.closeReply();
      } else {
        this.$emit('reply', this.index);
        this.replyingUser = this.info;
      }
    },
    // 回复评论中的回复消息
    replyLevelReplyer(user) {
      this.replyingUser = user;
      this.$emit('reply', this.index);
      this.replyComment = `回复 ${user.username}：`;
      this.replyCommentInput.focus();
      this.commentPrependLen = this.replyComment.length;
    },
    // 发表评论
    reply() {
      const list = this.info.replyList;
      const id = list.length ? list[list.length - 1].id + 1 : 0;
      this.info.replyList.push({
        id,
        avator: 'warrant01.png',
        username: this.info.username,
        owner: this.replyingUser.username,
        comment: this.replyComment.slice(this.commentPrependLen - 1),
        date: '2020-07-24 10:52'
      });
      this.closeReply();
    },
    // 关闭评论
    closeReply() {
      this.info.showReply = false;
    }
  }
};
</script>

<style lang="less" scoped>
  .reply-comments-item {
    border-top: 1px solid #ddd;
    background-color: #fafafa;
    .user-wrap {
      padding: 10px;
      min-height: 200px;
      .img-wrap {
        margin: 20px auto 10px;
        padding: 5px;
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .username {
        text-align: center;
      }
    }
    .content-wrap {
      padding: 10px;
      min-height: 200px;
      border-left: 1px solid #ddd;
      color: #333;
      background-color: #fff;
      .content {
        min-height: 170px;
      }
      .description {
        height: 20px;
        line-height: 20px;
        text-align: right;
        font-size: 12px;
        color: #888;
        .reply-btn {
          margin-left: 5px;
          color: #2d64b3;
          cursor: pointer;
        }
      }
      .reply-container {
        background-color: #f7f8fa;
        .reply-footer {
          margin-top: 10px;
          text-align: right;
        }
        .reply-list-wrap {
          li {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            .reply-img-wrap {
              flex: 0 0 60px;
              width: 60px;
              img {
                padding: 2px;
                width: 40px;
                height: 40px;
                border: 1px solid #ddd;
                background-color: #fff;
                cursor: pointer;
              }
            }
            .reply-content {
              flex: 1;
              padding: 5px 0;
              line-height: 20px;
              .reply-username {
                color: #2d64b3;
                cursor: pointer;
              }
            }
            .description {
              width: 100%;
            }
          }
        }
        .reply-self {
          padding: 10px;
        }
      }
    }
  }
</style>
